<template>
    <div ref="chart" id="chart"></div>
</template>
<script lang='ts' setup>
import { LineHeightOutlined } from '@ant-design/icons-vue';
import { useDebounceFn } from '@vueuse/core';
import { inject, onMounted, ref, watch } from 'vue';

const props = defineProps<{
    title?: string,
    textColor?: string
    yData: any[],
    color?: string[]
    orientType?: string
    LabelPosition?: 'center' | 'outside' | 'inside'
}>()

const echarts = inject('echarts') as any

const chart = ref()

const color = ['#F8DC66', '#609E98', '#00DEF2', '#73ff6e', '#3771f7', '#31f5c1', '#fda247', '#975FE5']

let chartInstance: any

watch(() => [props.yData,], () => {
    if (chartInstance) {
        const options = getOption()
        chartInstance.setOption(options)
    }
}, { deep: true })

function getSeries() {
    // const data = props.yData[0]
    return [
        {
            type: 'pie',
            radius: ['50%', '80%'],
            center: props.LabelPosition ? ['65%', '50%'] : ['50%', '50%'],
            avoidLabelOverlap: true,
            left: '20%',
            // right: '10%',
            // bottom: '10%',
            top: '15%',
            // minShowLabelAngle: 5,
            selectedMode: 'single',
            selectOffset: 0,
            label: {
                show: props.LabelPosition ? false : true,
                formatter: '{b}\n{c}个\n{d}%',
                position: props.LabelPosition ? props.LabelPosition : 'outside',
            },
            emphasis: {
                scaleSize: 15,
                itemStyle: {
                    color: 'red'
                },
                label: {
                    show: true,
                    formatter: '{b}\n{c}个\n{d}%',
                    fontWeight: 700,
                    fontFamily: '黑体',
                    fontSize: 16,
                }
            },
            // select: {
            //     label: {
            //         show: false,
            //         formatter: '{b}\n{c}个\n{d}%',
            //         fontWeight: 900,
            //         fontSize: 20
            //     },
            //     itemStyle: {
            //         borderWidth: 1,
            //         borderColor: '#000'
            //     }
            // },
            data: props.yData[0]
        },
        // {
        //     type: 'pie',
        //     id: 'Pie',
        //     radius: ['0%', '0%'],
        //     center: ['50%', '50%'],
        //     avoidLabelOverlap: true,
        //     label: { show: false },
        //     emphasis: {
        //         itemStyle: {
        //             color: 'red'
        //         }
        //     },
        //     data: []
        // }
    ]
}

function getOption() {
    return {
        title: {
            text: props.title,
            textStyle: {
                fontSize: 14,
                fontFamily: '黑体',
                color: props.textColor ? props.textColor : '#fff'
            }
        },
        color: props.color ? props.color : color,
        padAngle: 5,
        clockwise: true,
        tooltip: {
            trigger: 'item',
            confine: true,
            position: ['100%', '0%'],
            appendToBody: true,
            formatter: '{b}<br />{c}个<br />{d}%',
            textStyle: {
                fontFamily: '黑体',
                fontWeight: 700,
            }
        },
        legend: {
            type: 'scroll',
            orient: props.orientType ? props.orientType : 'vertical',
            left: 0,
            top: 20,
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 5,
            itemStyle: {
                borderWidth: 0,
            },
            textStyle: {
                color: props.textColor ? props.textColor : '#fff'
            }
        },
        series: getSeries()
    }
}

onMounted(() => {
    chartInstance = echarts.init(chart.value)
    const option = getOption()
    chartInstance.setOption(option)
    const handleResize = useDebounceFn(() => {
        chartInstance.resize()
    }, 1000)

    window.addEventListener('resize', () => handleResize())



    chartInstance.on('selectchanged', function (event: any) {
        // console.log(event);
        const idx = event.fromActionPayload.dataIndexInside + 1
        if (event.fromAction == 'select') {
            // console.log(props.yData[idx]);
            const data = props.yData[idx].map((item: any) => ({ ...item, itemStyle: { color: item.name == '已取样' ? '#9abdff' : '#fda247' } }))

            chartInstance.setOption({
                tooltip: {
                    show: true,
                    alwaysShowContent: true,
                },
                series: {
                    id: 'Pie',
                    radius: ['0%', '40%'],
                    data
                }
            });
        } else {
            chartInstance.setOption({
                tooltip: {
                    alwaysShowContent: false,
                },
                series: {
                    id: 'Pie',
                    radius: ['0%', '0%'],
                    data: []
                }
            });
        }
    });
})

</script>
<style lang='scss' scoped>
#chart {
    width: 100%;
    height: 100%;
}
</style>